<template>
  <van-dialog
    v-model="visible"
    show-cancel-button
    :beforeClose="handleSubmit"
    confirm-button-color="rgba(25, 137, 250, 1)"
  >
    <div class="ip-container" style="width: 100%; height: 63.5vh">
      <div v-for="(item, index) in this.InfoData" :key="index">
        <van-cell-group class="groupstyle" border inset>
          <van-cell title="物料号" :value="item.ProductId" />
          <van-cell title="物料名称" :value="item.ProductName" />
          <van-cell title="拍号" :value="item.UniqueId" />
          <van-cell title="玛氏批次" :value="item.BatchNO" />
          <van-cell title="投产数量" :value="item.Num" />
          <div v-if="item.SeqNo != ''">
            <van-cell title="箱码" :value="item.SeqNo" />
          </div>
          <van-cell title="投料批数" :value="item.FeedingBatchId" />
        </van-cell-group>
      </div>
      <!--       <ag-grid-vue
        style="width: 100%; height: 54vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        :singleClickEdit="true"
        rowSelection="multiple"
        :rowData="InfoData"
      >          //style="margin: 0.5rem,border-radius: 0.5rem"
      </ag-grid-vue> -->
    </div>
  </van-dialog>
</template>

<script>
import { Dialog } from "vant";
//import { AgGrid } from "../mixins/AgGrid";
//import { AgGridVue } from "ag-grid-vue";

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    //AgGridVue,
  },
  /*   mixins: [AgGrid], */
  watch: {
    value(val) {
      this.visible = val;
    },
    visible(val) {
      this.$emit("input", val);
    },
    InfoData(val) {
      this.InfoData = val;
      console.log(this.InfoData);
    },
  },
  props: {
    //父给子传递
    value: {
      type: Boolean,
      required: true,
    },
    InfoData: {
      type: Array,
    },
  },
  data() {
    return {
      savevalue: "",
      visible: this.value,
      /*      columnDefs: [
        { headerName: "物料号", field: "ProductId", width: 90 },
        { headerName: "物料名称", field: "ProductName", width: 125 },
        { headerName: "投产数量", field: "Num", width: 70 },
      ], */
    };
  },
  methods: {
    handleSubmit(action, done) {
      if (action === "confirm") {
        this.$emit("confirm");
        done();
      } else {
        this.$emit("confirm");
        done();
      }
    },
  },
  mounted() {
    //组件进来将父组件给的value值给visible
    this.visible = this.value;
    console.log(this.visible);
  },
};
</script>

<style scoped lang="less">
.ip-container {
  padding: 1rem auto;
  overflow-y: auto;
  white-space: nowrap;
  background-color: rgb(187, 187, 187);
}
.groupstyle {
  margin: 0.5rem;
  border: 1px solid #e8e8e8;
  border-radius: 0.5rem;
}
</style>